<!--
 * @Author: boyyang
 * @Date: 2022-01-26 17:36:02
 * @LastEditTime: 2022-03-18 21:43:54
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\blog\index.vue
-->

<template>
    <!-- <div class="blog"> -->
    <Background :url="userInfo?.avatarUrl">
        <div class="user-blog-wrapper">
            <div class="blog-article-content">
                <template v-for="(item, i) in blogDetail.blogs" :key="item._id">
                    <blog-item :blog="item" :uid="userInfo?.uid" @iconClick="iconClick"></blog-item>
                </template>
            </div>
        </div>
        <div class="edit-blog">
            <edit-blog :is-show="isShoweditBlog" @submit="submit"></edit-blog>
        </div>
        <div class="menu-btn">
            <menu-change :buttons="buttons" @btn-click="btnClick"></menu-change>
        </div>
    </Background>
    <!-- </div> -->
</template>

<script lang="ts" setup>
    import blogItem from './components/blogItem.vue'
    import editBlog from './components/editBlog.vue'
    import { getData, userMes, addOneData, delData, app } from '@/cloudbase/index'
    import { useMessage } from '@/components/message'
    interface IBlogDetail {
        limit: number
        page: number
        blogs: any[]
        isAll: boolean
    }

    const router = useRouter()
    const message = useMessage()

    const userInfo = userMes()

    onMounted(() => {
        getAllBlog()
    })

    const buttons = [
        { icon: 'icon-custom311' },
        { icon: 'icon-icon-prev' },
        { icon: 'icon-zuoyoujiantou-copy-copy-copy1' },
        { icon: 'icon-jia' },
    ]

    const blogDetail = reactive<IBlogDetail>({
        limit: 8,
        page: 0,
        blogs: [],
        isAll: false,
    })

    const isShoweditBlog = ref<boolean>(false)

    const iconClick = (type: number, _id: string) => {
        switch (type) {
            case 0:
                app.callFunction({
                    name: 'thumbsUp',
                    data: {
                        id: _id,
                        uid: userInfo?.uid,
                        collectionName: 'usersBlog',
                    },
                }).then((res: any) => {
                    message.success(res.result.msg)
                    getAllBlog()
                })
                break
            case 1:
                break
            case 2:
                break
            case 3:
                router.push({
                    path: '/blogDetail',
                    query: {
                        id: _id,
                    },
                })
                break
            case 4:
                delData('usersBlog', _id).then((res) => {
                    message.success('成功删除博客')
                    getAllBlog()
                })
                break
            default:
                return
        }
    }

    const btnClick = (index: number) => {
        switch (index) {
            case 0:
                router.back()
                break
            case 1:
                if (blogDetail.page == 0) {
                    message.warning('已经是第一页了')
                    return
                }
                console.log(blogDetail.page)
                blogDetail.page -= 1
                getAllBlog()
                break
            case 2:
                if (blogDetail.isAll) {
                    message.warning('没有更多了')
                    return
                }
                console.log(blogDetail.page)
                blogDetail.page += 1
                getAllBlog()

                break
            case 3:
                isShoweditBlog.value = !isShoweditBlog.value
                break
            default:
                return
        }
    }

    const submit = (mes: any) => {
        let params = {
            blogTitle: mes?.title,
            blogContent: mes?.text,
            blogDesc: mes?.desc,
            blogBg: mes?.blogBg,
            time: new Date().getTime(),
            avatarUrl: userInfo?.avatarUrl,
            email: userInfo?.email,
            nickName: userInfo?.nickName,
        }

        addOneData('usersBlog', params).then((res) => {
            message.success('博客发布成功')
            isShoweditBlog.value = false
            getAllBlog()
        })
    }

    const getAllBlog = () => {
        getData('usersBlog', blogDetail.page, blogDetail.limit, {
            key: 'thumb',
            type: 'desc',
        }).then((res) => {
            if (res.data.length < 8) {
                blogDetail.isAll = true
            } else {
                blogDetail.isAll = false
            }
            blogDetail.blogs = res.data
        })
    }
</script>

<style scoped lang="scss">
    .blog {
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    .user-blog-wrapper {
        box-sizing: border-box;
        width: 100%;
        height: 100%;

        padding: 1% 5%;

        overflow-y: auto;

        .blog-article-content {
            box-sizing: border-box;
            width: 100%;
            // height: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            padding-bottom: 200px;
        }
    }

    .menu-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @media screen and (max-width: 1000px) {
        .user-blog-wrapper {
            overflow-x: hidden;
            padding: 0;
        }
    }
</style>
